<template>
  <view class="feedback-page">
    <!-- 乡村风格背景 -->
    <view class="village-bg"></view>
    
    <!-- 顶部导航 -->
    <view class="nav-bar">
     <!-- <view class="nav-back" @click="goBack">
        <uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
      </view> -->
      <text class="nav-title">意见反馈</text>
    </view>
    
    <!-- 反馈表单 -->
    <scroll-view class="feedback-container" scroll-y>
      <!-- 反馈类型选择 -->
      <view class="feedback-section">
        <text class="section-title">反馈类型</text>
        <view class="feedback-types">
          <view 
            class="type-item" 
            v-for="(type, index) in feedbackTypes" 
            :key="index"
            :class="{active: selectedType === type.value}"
            @click="selectType(type.value)"
          >
            <uni-icons :type="type.icon" size="28" :color="selectedType === type.value ? '#4a90e2' : '#666'"></uni-icons>
            <text>{{type.label}}</text>
          </view>
        </view>
      </view>
      
      <!-- 订单选择（如果有） -->
      <view class="feedback-section" v-if="showOrderSelect">
        <text class="section-title">相关订单</text>
        <picker class="order-picker" @change="selectOrder" :value="selectedOrderIndex" :range="recentOrders" range-key="orderNo">
          <view class="picker-content">
            <text>{{selectedOrder ? selectedOrder.orderNo : '请选择相关订单'}}</text>
            <uni-icons type="arrowdown" size="20" color="#666"></uni-icons>
          </view>
        </picker>
      </view>
      
      <!-- 反馈内容 -->
      <view class="feedback-section">
        <text class="section-title">反馈内容</text>
        <textarea 
          class="feedback-content" 
          v-model="feedbackContent" 
          placeholder="请详细描述您的问题或建议（至少10个字）"
          placeholder-class="placeholder"
          maxlength="500"
          @input="checkContent"
        ></textarea>
        <text class="word-count">{{feedbackContent.length}}/500</text>
      </view>
      
      <!-- 上传图片 -->
      <view class="feedback-section">
        <text class="section-title">上传凭证（选填）</text>
        <text class="section-tip">最多可上传3张图片，每张不超过5M</text>
        <view class="upload-container">
          <view 
            class="upload-item" 
            v-for="(img, index) in uploadedImages" 
            :key="index"
          >
            <image class="preview-image" :src="img" mode="aspectFill"></image>
            <view class="delete-btn" @click="removeImage(index)">
              <uni-icons type="close" size="20" color="#fff"></uni-icons>
            </view>
          </view>
          <view 
            class="upload-btn" 
            v-if="uploadedImages.length < 3"
            @click="chooseImage"
          >
            <uni-icons type="plus" size="40" color="#ccc"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="feedback-section">
        <text class="section-title">联系方式</text>
        <input 
          class="contact-input" 
          v-model="contactInfo" 
          placeholder="请输入手机号/微信号（方便我们联系您）"
          placeholder-class="placeholder"
        />
      </view>
      
      <!-- 提交按钮 -->
      <button 
        class="submit-btn" 
        :class="{disabled: !formValid}" 
        :disabled="!formValid"
        @click="submitFeedback"
      >
        提交反馈
      </button>
    </scroll-view>
    
    <!-- 提交成功弹窗 -->
    <uni-popup ref="successPopup" type="center">
      <view class="success-popup">
        <view class="popup-icon">
          <uni-icons type="checkmarkempty" size="60" color="#4CAF50"></uni-icons>
        </view>
        <text class="popup-title">反馈提交成功</text>
        <text class="popup-content">感谢您的反馈，我们会在1-3个工作日内处理</text>
        <button class="popup-btn" @click="closeSuccessPopup">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 反馈类型
      feedbackTypes: [
        {label: '取件问题', value: 'pickup', icon: 'cart'},
        {label: '配送问题', value: 'delivery', icon: 'paperplane'},
        {label: '费用问题', value: 'payment', icon: 'wallet'},
        {label: '服务建议', value: 'suggestion', icon: 'compose'},
        {label: '其他问题', value: 'other', icon: 'help'}
      ],
      selectedType: '',
      
      // 相关订单
      recentOrders: [
        {orderNo: 'DD202309011234', time: '2023-09-01 14:30'},
        {orderNo: 'DD202309021235', time: '2023-09-02 09:15'},
        {orderNo: 'DD202309031236', time: '2023-09-03 16:45'}
      ],
      selectedOrderIndex: -1,
      selectedOrder: null,
      
      // 反馈内容
      feedbackContent: '',
      
      // 上传图片
      uploadedImages: [],
      
      // 联系方式
      contactInfo: ''
    }
  },
  computed: {
    // 是否显示订单选择
    showOrderSelect() {
      return ['pickup', 'delivery', 'payment'].includes(this.selectedType)
    },
    
    // 表单是否有效
    formValid() {
      return this.selectedType && 
             this.feedbackContent.length >= 10 && 
             (this.showOrderSelect ? this.selectedOrder : true)
    }
  },
  methods: {
    // 选择反馈类型
    selectType(type) {
      this.selectedType = type
      if (!this.showOrderSelect) {
        this.selectedOrder = null
        this.selectedOrderIndex = -1
      }
    },
    
    // 选择订单
    selectOrder(e) {
      this.selectedOrderIndex = e.detail.value
      this.selectedOrder = this.recentOrders[this.selectedOrderIndex]
    },
    
    // 检查内容长度
    checkContent() {
      // 可以添加额外的验证逻辑
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 3 - this.uploadedImages.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 模拟上传过程
          uni.showLoading({
            title: '上传中...'
          })
          
          setTimeout(() => {
            this.uploadedImages = [...this.uploadedImages, ...res.tempFilePaths]
            uni.hideLoading()
          }, 1000)
        }
      })
    },
    
    // 删除图片
    removeImage(index) {
      this.uploadedImages.splice(index, 1)
    },
    
    // 提交反馈
    submitFeedback() {
      if (!this.formValid) return
      
      // 准备提交数据
      const feedbackData = {
        type: this.selectedType,
        order: this.selectedOrder,
        content: this.feedbackContent,
        images: this.uploadedImages,
        contact: this.contactInfo,
        submitTime: new Date().toLocaleString()
      }
      
      // 模拟提交过程
      uni.showLoading({
        title: '提交中...',
        mask: true
      })
      
      setTimeout(() => {
        uni.hideLoading()
        this.$refs.successPopup.open()
        
        // 重置表单
        this.resetForm()
      }, 1500)
    },
    
    // 重置表单
    resetForm() {
      this.selectedType = ''
      this.selectedOrder = null
      this.selectedOrderIndex = -1
      this.feedbackContent = ''
      this.uploadedImages = []
      this.contactInfo = ''
    },
    
    // 关闭成功弹窗
    closeSuccessPopup() {
      this.$refs.successPopup.close()
      this.goBack()
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback-page {
  position: relative;
  min-height: 100vh;
  background-color: #f8f9fa;
  overflow: hidden;
}

/* 乡村风格背景 */
.village-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(135deg, rgba(139, 195, 74, 0.1) 0%, transparent 50%),
    linear-gradient(45deg, rgba(255, 193, 7, 0.1) 0%, transparent 50%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,50 Q50,20 80,50" stroke="rgba(139, 195, 74, 0.1)" stroke-width="2" fill="none"/></svg>');
  background-size: cover;
  z-index: 0;
}

/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  padding: 30rpx;
  position: relative;
  z-index: 1;
  
  .nav-back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(74, 144, 226, 0.8);
    backdrop-filter: blur(10rpx);
    transition: all 0.3s;
    
    &:active {
      background: rgba(74, 144, 226, 1);
    }
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

/* 反馈容器 */
.feedback-container {
  height: calc(100vh - 120rpx);
  padding: 30rpx;
}

/* 反馈区块 */
.feedback-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  
  .section-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .section-tip {
    display: block;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 20rpx;
  }
}

/* 反馈类型 */
.feedback-types {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .type-item {
    flex: 1;
    min-width: 150rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 10rpx;
    border-radius: 16rpx;
    background: #f5f5f5;
    transition: all 0.3s;
    
    &.active {
      background: rgba(74, 144, 226, 0.1);
      border: 1rpx solid #4a90e2;
      
      text {
        color: #4a90e2;
      }
    }
    
    uni-icons {
      margin-bottom: 10rpx;
    }
    
    text {
      font-size: 26rpx;
      color: #666;
    }
  }
}

/* 订单选择 */
.order-picker {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  background: #f5f5f5;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333;
  
  .picker-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* 反馈内容 */
.feedback-content {
  width: 100%;
  height: 200rpx;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.word-count {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #999;
}

/* 上传图片 */
.upload-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .upload-item {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    position: relative;
    overflow: hidden;
    
    .preview-image {
      width: 100%;
      height: 100%;
    }
    
    .delete-btn {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .upload-btn {
    width: 200rpx;
    height: 200rpx;
    border: 2rpx dashed #ccc;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
  }
}

/* 联系方式输入 */
.contact-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  background: #f5f5f5;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(135deg, #4a90e2, #5aa1ff);
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  border: none;
  box-shadow: 0 8rpx 30rpx rgba(74, 144, 226, 0.3);
  margin-top: 30rpx;
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 6rpx 25rpx rgba(74, 144, 226, 0.3);
  }
  
  &.disabled {
    background: #bdc3c7;
    box-shadow: none;
  }
}

/* 成功弹窗 */
.success-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 30rpx;
  padding: 40rpx;
  text-align: center;
  
  .popup-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30rpx;
  }
  
  .popup-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .popup-content {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 40rpx;
  }
  
  .popup-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(135deg, #4a90e2, #5aa1ff);
    color: #fff;
    font-size: 30rpx;
    border-radius: 40rpx;
    border: none;
  }
}

/* 占位符样式 */
.placeholder {
  color: #bdc3c7;
  font-size: 28rpx;
}
</style>